<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Cheerful的个人博客</title>
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/global.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/pace-theme-flash.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/d-audio.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/myPagination.css">
    <link rel="stylesheet" href="http://wzfdepress.com/static/css/index.css">
    <link rel="shortcut icon" href="http://img.wzfdepress.com/avatar.jpg">
    <style rel="stylesheet">
        .lazy-image {
            background: url('https://ttxxi.oss-cn-hangzhou.aliyuncs.com/imagehosting/wait.gif') no-repeat center;
            background-size: 26% 35%;
            height: 100%;
            width: 100%;
        }
        .article>div{
            display: block;
        }
        .avatar-info{
            line-height: 60px;
            color: darksalmon;
        }
    </style>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!--PC导航栏-->
    <nav class="nav-bar-holder">
        <div class="nav-bar" id="nav-bar">
            <div class="logo-box">
                <a href="index.html" class="blog-title ta-c"><img style="vertical-align: top;" alt="logo"
                        src="http://img.wzfdepress.com/avatar.jpg" /></a>
                <span class="avatar-info">Cheerful的个人博客</span>
            </div>

            <!--搜索框-->
            <div id="search-nb">
                <span class="search-s fl">
                    <label for="search-input"></label><input class="fl" type="text" id="search-input"
                                                             placeholder="请输入关键字">
                    <a class="search-icon fl" onclick="search_by_key()" href="javascript:void(0);"></a>
                </span>
            </div>

            <div class="nb-a-holder" id="home"><a id="active" class="nb-a ta-c" href="index.html">首页</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="category.html">分类</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="archive.html">归档</a></div>
            <div class="nb-a-holder"><a class="nb-a ta-c" href="link.html">友情链接</a></div>

<!--            <div class="nb-a-holder-last">-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="login.html">登录</a>-->
<!--                </div>-->
<!--                <div class="nb-a-holder-small">-->
<!--                    <a class="a-login" href="register.html">注册</a>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </nav>
    <!--mobile导航栏-->
    <nav class="mobile-nav">
        <div class="logo-box">
            <a href="index.html" class="blog-title ta-c">
                <img style="vertical-align: top;" alt="logo"
                    src="http://img.wzfdepress.com/avatar.jpg" /></a>
        </div>
        <a id="mobile_cate" style="background-image: url('http://wzfdepress.com/static/img/cate.svg')" href="javascript:void(0);"></a>
    </nav>
    <ul id="nav-m-list">
        <li id="cancel-li"><a class="fr" id="cancel" href="javascript:void(0);"></a></li>
        <li id="m-img-li">
            <img id="m-img" src="http://img.wzfdepress.com/avatar.jpg">
        </li>
        <li>
            <span class="search-s fl">
                <label for="search-input-m"></label><input class="fl" type="text" id="search-input-m" placeholder="关键词">
                <a class="search-icon fl" onclick="m_search()" href="javascript:void(0);"></a>
            </span>
        </li>
        <li><a class="w-h-100 fl" href="index.html">首页</a></li>
<!--        <li><a class="w-h-100 fl" href="login.html">登录</a></li>-->
<!--        <li><a class="w-h-100" href="register.html">注册</a></li>-->
        <li><a class="w-h-100 fl" href="category.html">分类</a></li>
        <li><a class="w-h-100 fl" href="archive.html">归档</a></li>
        <li><a class="w-h-100 fl" href="link.html">友情链接</a></li>
    </ul>
    <div id="d-audio" class="d-audio" style="width: 150px; z-index: 99; position: fixed; bottom: 5px; left: 5px;"></div>
    <!--主体-->
    <div class="big-container" id="particles-js">
        <article class="article">
            <!--左容器-->
            <div class="left-holder">
                <div id="article-holder" style="display: block">
                    <!--文章-->
                </div>
                <!--分页指示器-->
                <div id="pagination" class="pagination fl left-holder" style="width: 739px; float: left;display: block"></div>
            </div>

            <!--右容器-->
            <div class="right-holder" style="display: block">
                <!--个人介绍-->
                <div class="column-container">
                    <ul class="column_box">
                        <li class="column-title">
                            <span class="at-sort b-b-ece fl"><a class="at-sort-comment-a c-666 fl">个人介绍</a></span>
                        </li>
                        <li class="person-img-li">
                            <img alt="头像" id="person-img"
                                src="http://img.wzfdepress.com/avatar.jpg">
                        </li>
                        <li class="person-intro-detail gradient-text">
                            <h1>欢迎光临我的博客</h1>
                        </li>
                        <li class="person-intro-detail">
                            <h3>网站简介：基于 Java 的极简主义博客</h3>
                        </li>
                        <li class="person-intro-detail">
                            <h3>来自：
                                <a href="https://www.sicau.edu.cn/" style="color: #666666;text-decoration-color: #666666">四川农业大学
                                </a></h3>
                        </li>
                        <li class="person-intro-detail">
                            <h3>爱好：篮球，
                                <a href="#"
                                   style="color: #666666;text-decoration-color: #666666"
                                   onclick="musicStart()">音乐</a>，动漫</h3>
                        </li>
                    </ul>
                </div>
                <!--点击排行-->
                <div class="column-container">
                    <ul class="column_box" id="like-box">
                        <li class="column-title">
                            <span class="at-sort b-b-ece fl">
                                <a class="at-sort-comment-a c-666 fl">点击排行</a>
                            </span>
                        </li>
                        <li class="column-category" th:each="hot:${hots}">
                            <a th:href="@{'/article/'+${hot.id}+'.html'}" th:text="${hot.title}"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </article>
    </div>
    <!--尾部-->
    <footer class="footer">
        <div class="footer-line">
            <div class="icon-center">
                <span class="icon-box"><a id="github-icon" target="_blank" href="https://gitee.com/cheerfulwzf"
                        class="foot-icon"></a>
                </span>
                <span class="icon-box"><a id="qq-icon" target="_blank"
                        href="tencent://Message/?Uin=2434780193&amp;websiteName=q-zone.qq.com&amp;Menu=yes"
                        class="foot-icon"></a>
                </span>
            </div>
        </div>
        <div class="footer-line">Powered By <a href="mailto:cheerful0120@qq.com"
                                               target="_blank">Cheerful</a> • © 2021-10</div>
        <div class="footer-line"><a href="http://beian.miit.gov.cn/" target="_blank"> 蜀ICP备2021024763号</a>
    </footer>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/sweetalert.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/pace.min.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/base.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/d-audio.js"></script>
    <script type="text/javascript" src="http://wzfdepress.com/static/js/myPagination.js"></script>
<!--    <script type="text/javascript" src="http://wzfdepress.com/static/js/jquery.pagination.js"></script>-->
    <script type="text/javascript">
        const size=5
        // 音乐插件
        function musicStart() {
            myAudio.play()
        }
        const myAudio = new Daudio({
            ele: '#d-audio',
            src: 'http://img.wzfdepress.com/music/%E9%99%88%E5%A5%95%E8%BF%85-%E5%AD%A4%E5%8B%87%E8%80%85.mp3',
            imageurl: 'http://img.wzfdepress.com/music/%E9%99%88%E5%A5%95%E8%BF%85-%E5%AD%A4%E5%8B%87%E8%80%85.jpg',
            name: '孤勇者',
            singer: '陈奕迅',
            // 是否显示进度信息
            showprogress: true,
            // 是否循环
            loop: true,
            // '' 就是默认状态， cricle则是初始化就是圆形且可以旋转
            initstate: 'cricle',
            next: function () {},
            ended: function () {}
        });
        // myAudio.play()
        // 图片懒加载
        const lazyImage = new LazyImage('.lazy-image');

        // 分页
        const pagination = new myPagination({
            id: 'pagination',
            curPage: 1, //初始页码
            pageTotal: 3, //总页数
            pageAmount: 10, //每页多少条
            dataTotal: 29, //总共多少条数据
            pageSize: 3, //可选,分页个数
            //showPageTotalFlag: true, //是否显示数据统计
            getPage: function (page) {
                getBlogPage(page);
            }
        });

        function getBlogPage(page) {
            $.ajax({
                url:"/article?current="+page+"&size="+size,
                type:"get",
                success:function (data) {
                    //分页插件给上
                    console.log("current page: "+pagination.curPage)
                    console.log("pageSize"+pagination.pageSize);
                    pagination.curPage=page //初始页码
                    pagination.pageTotal=data.data.pages //总页数
                    pagination.pageAmount=data.data.size //每页多少条
                    pagination.dataTotal=data.data.total //总共多少条数据
                    if (pagination.pageTotal<5){
                        pagination.pageSize=pagination.pageTotal
                    }else{
                        pagination.pageSize=pagination.pageTotal/2
                    }

                    let html='';
                    for (let i = 0; i < data.data.records.length; i++) {
                        let item=data.data.records[i];
                        let tagHtml='';
                        for (let j = 0; j < item.tags.length; j++) {
                            tagHtml+=`<a href="category.html">`+` `+item.tags[j]+` `+`</a>`;
                        }
                        html+=`<div class="ab-content">
                            <a href="article/`+item.id+`.html" class="article-img-box">
                                <img class="lazy-image article-img" src="`+item.coverId+`">
                            </a>
                            <div class="article-title">
                                <a href="article/`+item.id+`.html">`+item.title+`</a>
                            </div>
                            <div class="article-cate">
                            `+tagHtml+`
                            </div>
                            <div class="article-detail-box c-666">
                                `+item.blogDesc+`
                            </div>
                            <span class="article-tail-box">
                                <i class="fl"
                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/read-index.svg')"></i>
                                <span class="read-number c-999 fl">浏览量：`+item.viewNum+`</span>
                                <i class="fl"
                                    style="background-image: url('https://zhaoyangkun.gitee.io/blog-static/img/comment-index.svg')"></i>
<!--                                <span class="comment-number c-999 fl">0</span>-->
                                <span class="article-date c-999">`+item.gmtModified+`</span>
                                <span class="article-author one-line-overflow c-999">   `+item.authorName+`</span>
                            </span>

                        </div>`;
                    }
                    $("#article-holder").html(html);

                }
            })
        }

        $(function () {
            getBlogPage(1);
        })
    </script>
</body>

</html>